<template>
	<view style="padding: 10%;">
		<uni-section title="修改密码 " type="line">
			<view>
				<uni-section title="旧密码"><uni-easyinput type="password" v-model="Info.oldpwd"
						placeholder="请输入旧密码"></uni-easyinput>
				</uni-section>

				<uni-section title="新密码"><uni-easyinput type="password" v-model="Info.newpwd"
						placeholder="请输入新密码"></uni-easyinput>
				</uni-section>

				<view class="button-container">
					<button @click="xiugai" type="primary" size="mini" class="zhuce-button">修改密码</button>
					<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
				</view>

			</view>

		</uni-section>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import {
		api,
		tools
	} from '../../api/api.js';
	import userstore from '../../store/user.js';
	import {
		storeToRefs
	} from 'pinia';

	const {
		update
	} = userstore();

	const Info = ref({
		oldpwd: '',
		newpwd: ''
	})

	const reset = () => {
		Info.value = {
			oldpwd: '',
			newpwd: ''
		};
	};

	const logout = () => {
		api.delete('/auth', {}, () => {
			update()
		})
	}

	const toPage = (page) => {
		uni.switchTab({
			url: '/pages/my/my'
		});
	}

	const xiugai = () => {
		api.patch('/user/password', Info.value, (data) => {
			if (data.success) {
				uni.showToast({
					title: '登录状态已失效，请重新登录！'
				});
				logout();
				toPage();
			} else {
				uni.showToast({
					title: data.message,
				});
			}
		});
	};
</script>

<style>
	.zhuce-button {
		width: 48%;
		background-color: #007bff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}

	.reset-button {
		width: 48%;
		background-color: #dc3545;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}
</style>